<template>
  <v-flex xs12 :class="classes">
    <v-hover>
      <template v-slot="{ hover }">
        <v-card
          :height="200"
          color="grey lighten-1"
          :elevation="hover ? 24 : 1"
          class="d-flex justify-space-between mx-8 mt-10"
          @click="$router.push('/')"
        >
          <v-img :src="`${value.image}`" height="100%">
            <v-layout fill-height wrap text-xs-right ma-0>
              <v-flex align-self-end>
                <div class="caption  ml-5 mb-5">
                  <v-icon large color="blue darken-2">{{ value.icon }}</v-icon>
                  <span class="subtitle-1 font-regular ml-3" color="black">
                    {{ value.title }}
                  </span>
                </div>
              </v-flex>
            </v-layout>
          </v-img>
          <v-fade-transition>
            <v-overlay v-if="hover" absolute color="#FFFFFF"> </v-overlay>
          </v-fade-transition>
        </v-card>
      </template>
    </v-hover>
  </v-flex>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  props: {
    size: {
      type: Number,
      required: true
    },
    value: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    classes() {
      return {
        md6: this.size === 2,
        md4: this.size === 3
      };
    }
  }
};
</script>

<style>
.v-image__image {
  transition: 0.3s linear;
}
</style>
